<template>
  <div>
    <div class="option-card-wrap">
      <vxe-table
          ref="optionTable"
          row-key
          :data="dataSource"
          resizable
          border
          :edit-config="{trigger: 'click', mode: 'cell'}"
          :checkbox-config="{checkField: 'visible'}"
          @checkbox-all="selectAllEvent"
          @checkbox-change="selectChangeEvent"
          align="center"
          style="width: 100%">
        <template v-for="item in columns">
          <vxe-table-column v-if="item.field === 'visible'" :title="item.title" type="checkbox" width="60" align="center"/>
          <vxe-table-column v-else-if="item.field === 'sort'" width="40" align="center">
            <span class="drag-btn"><i class="vxe-icon--menu"></i></span>
          </vxe-table-column>
          <vxe-table-column
              v-else
              :edit-render="item.field === 'width' ? {name: 'input', attrs: {type: 'text'}} : null"
              :key="item.field"
              :field="item.field"
              :title="item.title"
              :width="item.width || ''"
              align="center"
          >
            <template v-if="item.field === 'sort'" v-slot="{ row }">
              <div class="sort-wrap">
                <i class="vxe-icon--upload" @click="handleSort(99, row)"></i>
                <i class="vxe-icon--caret-top" @click="handleSort(1, row)"></i>
                <i class="vxe-icon--caret-bottom" @click="handleSort(-1, row)"></i>
                <i class="vxe-icon--download" @click="handleSort(-99, row)"></i>
              </div>
            </template>
            <!--<template v-else-if="item.field === 'visible'" v-slot="{ row }">
              <el-checkbox v-model="row.visible"/>
            </template>-->
            <template v-else-if="item.field === 'freeze'" v-slot="{ row }">
              <el-checkbox v-model="row.freeze"/>
            </template>
          </vxe-table-column>
        </template>
      </vxe-table>
    </div>
    <footer class="el-dialog__footer option-footer">
      <el-button size="mini" round type="primary" @click="handleReset">重置</el-button>
      <el-button size="mini" round type="primary" @click="handleSure">确认</el-button>
      <el-button size="mini" round colored="colored" @click="closeDialog">取消</el-button>
    </footer>
  </div>
</template>

<script>
  import Sortable from 'sortablejs'

  export default {
    data() {
      return {
        columns: [
          {
            field: 'sort',
            title: '排序',
          },
          {
            field: 'value',
            title: '字段名称'
          },
          {
            field: 'visible',
            title: '显示',
            width: 80
          },
          {
            field: 'width',
            title: '列宽',
            editRender: {name: 'input'}
          },
          {
            field: 'freeze',
            title: '冻结',
            width: 80
          }
        ],
        dataSource: this.dataList
      }
    },
    model: {
      prop: 'dialogVisible',
      event: 'change'
    },
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      },
      dataList: {
        type: Array,
        default: () => ([
          {
            "key": "orderNum",
            "value": "订单编号",
            visible: true
          },
          {
            "key": "orderTime",
            "value": "日期",
            visible: true
          },
          {
            "key": "deptName",
            "value": "部门",
            visible: true
          },
          {
            "key": "cashierName",
            "value": "收银员",
            visible: true
          },
          {
            "key": "transactionTypeName",
            "value": "交易类型",
            visible: true
          },
          {
            "key": "transactionModeName",
            "value": "交易方式",
            visible: true
          },
          {
            "key": "summation",
            "value": "小计",
            visible: true
          },
          {
            "key": "0001",
            "value": "现金",
            visible: true
          },
          {
            "key": "0019",
            "value": "商品充值卡",
            visible: true
          },
          {
            "key": "0012",
            "value": "微信（非联网）",
            visible: true
          },
          {
            "key": "0003",
            "value": "舍分",
            visible: true
          }
        ])
      }
    },
    mounted() {
      this.rowDrop()
    },
    beforeDestroy() {
      if (this.sortable) {
        this.sortable.destroy()
      }
    },
    methods: {
      rowDrop() {
        this.$nextTick(() => {
          let xTable = this.$refs.optionTable
          this.sortable = Sortable.create(xTable.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
            handle: '.drag-btn',
            onEnd: ({newIndex, oldIndex}) => {
              let currRow = this.dataSource.splice(oldIndex, 1)[0]
              this.dataSource.splice(newIndex, 0, currRow)
            }
          })
        })
      },
      handleSure() {
        this.$emit('optionData', this.$refs.option.getData())
        this.$emit('change', false)
      },
      handleReset() {

      },
      closeDialog() {
        this.$emit('change', false)
      },
      handleSort(type, data) {
        let list = this.dataSource
        let index = -1
        switch (type) {
          case 99:
            list = list.filter(item => item.key !== data.key)
            list.unshift(data)
            break
          case 1:
            index = list.findIndex(item => item.key === data.key)
            if (index !== 0) {
              list.splice(index - 1, 2, data, list[index - 1])
            }
            break
          case -1:
            index = list.findIndex(item => item.key === data.key)
            if (index !== (list.length - 1)) {
              list.splice(index, 2, list[index + 1], data)
            }
            break
          case -99:
            list = list.filter(item => item.key !== data.key)
            list.push(data)
            break
          default:
            break
        }
        this.dataSource = list
      },
      selectChangeEvent() {
        console.log(this.$refs.option.getCheckboxRecords())
      },
      selectAllEvent ({ checked, records }) {
        this.dataSource.forEach(row => {
          this.$refs.optionTable.setCheckboxRow(row, checked)
        })
      },
    }
  }
</script>

<style lang="scss">
  @import "@/styles/var.scss";

  .option-card-wrap {
    padding: 6px 12px;
    margin: 6px 6px 0;
    background: #FFFFFF;
    box-shadow: 0 0 6px 0 #DFDFDF;
    border-radius: 4px;
    .sort-wrap {
      i {
        margin: 0 5px;
        color: $themeColor;
        cursor: pointer;
        &:active {
          opacity: 0.6;
        }
      }
    }
  }

  .option-footer {
    padding: 12px 0 !important;
    text-align: center !important;
  }
</style>